<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        .router-link-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- <router-link to="/A">AAAA</router-link> -->
        <!-- tag 将router-link默认的a改成li -->
        <!-- <router-link to="/A" tag="li"><a>AAAA</a></router-link> -->
        <!-- <router-link :to="{path:'/B'}">BBBB</router-link> -->
        <!-- <router-link :to="{name:'ccccc'}">CCCC</router-link> -->
        <button @click="changeUrl()">我是自己写的伪routerlink</button>
        <router-view></router-view>
    </div>
    <script src='./vue.js'></script>
    <script src="./vue-router.js"></script>
    <script>
        // 提供三个组件
        var Acom = {
            template: `<div>AAAAAAAAAAAAA</div>`
        };
        var Bcom = {
            template: `<div>BBBBBBBBBBB</div>`
        };
        var Ccom = {
            template: `<div>CCCCCCCCCC</div>`
        };

        // 配置路由
        var routes = [{
            path: '/',
            // component: Acom
            redirect: '/A'
        }, {
            path: '/A',
            component: Acom
        }, {
            path: '/B',
            component: Bcom
        }, {
            name: 'ccccc',
            path: '/C',
            component: Ccom
        }, {
            // 任意标识 都会监测到 
            // 要写在路由配置的末尾
            path: '*',
            // component: Acom
            redirect: '/A'
        }];

        // 动态路由
        // 场景: 当不同标识 渲染同一个组件时 
        // 写法: 在路由配置中  [{path:'/A/:动态路由参数id'}]

        var router = new VueRouter({
            routes
        });
        new Vue({
            el: '#app',
            router,
            data: {

            },
            methods: {
                changeUrl() {
                    // 把url标识 改为 /C
                    this.$router.push('/C');

                }
            }
        });
    </script>
</body>

</html>